<template>
  <div class="index">
    <div>
      <w-header :index="data.type.articleTypeId"></w-header>
      <div class="body body-1">
        <div class="tab-titles">
          <router-link v-for="type in data.typeList" :key="type.articleTypeId"
            :class="{ active: type.articleTypeId == data.type.articleTypeId }"
            :to="{ name: 'ArticlePage', params: { id: type.articleTypeId, page: 1 } }">{{ type.articleTypeName }}
          </router-link>
        </div>
        <div>
          <div v-for="(item, index) in data.page.records" class="list-item" :class="{ hr: index % 5 == 4 }"
            :key="item.articleId">
            <div>{{ index + 1 }}</div>
            <router-link :to="'/article-' + item.articleId">{{ item.articleTitle }}</router-link>
            <div>{{ item.articleWorker }}</div>
            <div>{{ item.articleTime }}</div>
          </div>
          <el-pagination style="justify-content: center;" v-model:currentPage="data.page.current" :page-size="15"
            background layout="total,  prev, pager, next, jumper" :total="Number(data.page.total)"
            @current-change="doPage();" />
        </div>
      </div>
    </div>
    <w-footer></w-footer>
  </div>
</template>

<script setup>
import WHeader from '@/components/WHeader.vue';
import WFooter from '@/components/WFooter.vue';
import ArticleApi from '@/api/cms/ArticleApi';
import ArticleTypeApi from '@/api/cms/ArticleTypeApi';

import { reactive, onMounted, getCurrentInstance, watch } from 'vue';
import { onBeforeRouteUpdate } from 'vue-router';

const proxy = getCurrentInstance().proxy;
//proxy.$route.params.id 当前分类编号
//proxy.$route.params.page 当前页码

const data = reactive({
  type: {},//当前分类信息
  typeList: {},//分类列表
  page: { total: 0, current: 1, records: [] }//当前分页结果
});

const init = () => {
  ArticleTypeApi.list().then(r => {
    data.typeList = r.data.data;
    if (!data.typeList) {
      proxy.$router.push("/404");
      return;
    }
    return ArticleTypeApi.get(proxy.$route.params.id);
  }).then(r => {
    data.type = r.data.data;
    if (!data.type?.articleTypeId) {
      proxy.$router.push("/404");
      return;
    }
    document.title = data.type.articleTypeName;
    return ArticleApi.page({ articleTypeId: data.type.articleTypeId, size: 15, current: proxy.$route.params.page })
  }).then(r => {
    data.page = r.data.data;
  });
}

const doPage = () => {
  proxy.$router.push({ name: 'ArticlePage', params: { id: data.type.articleTypeId, page:  data.page.current} });
}

onBeforeRouteUpdate(init);
onMounted(init);
watch()
</script>

<style scoped>
.list-item {
  display: grid;
  grid-template-columns: 3em 1fr 7em 10em;
  font-size: .8rem;
  padding: .7rem 0 .4rem;
  border-bottom: dotted #ccc 1px;
}

.list-item.hr {
  padding-bottom: 1.5rem;
  border-bottom: solid #bbb 1px;
  margin-bottom: 1rem;
}

.list-item>* {
  display: flex;
  justify-content: center;
  align-items: center;
  color: #777;
}

.list-item>a {
  font-size: 1rem;
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  justify-content: flex-start;
  color: #333;
  position: relative;
  transition: all .3s;
}

.list-item>a:hover {
  top: 1px;
  left: 1px;
  color: var(--el-color-primary);
}

.body-1 {
  margin-top: 0;
  padding: 1rem 0;
  box-sizing: border-box;
  align-items: flex-start;
}

.body-1>* {
  min-height: calc(100vh - 186px);
  height: auto !important;
  box-sizing: border-box;
}

.body-1>:nth-child(1) {
  width: 200px;
  padding: 0 !important;
  padding-top: 3rem !important;
  background-color: rgba(0, 0, 0, 0) !important;

}

.body-1>:nth-child(2) {
  width: 800px !important;
  background-color: #FFF !important;
  box-shadow: 0 0 15px #ccc;
  margin: 0 !important;
  border-radius: 10px;
  padding: 2rem;
  position: relative;
  z-index: 1;
}

.tab-titles>a {
  display: block;
  text-align: center;
  background-color: rgba(0, 0, 0, .5);
  margin: 1rem;
  padding: 1rem;
  border-radius: 2rem;
  color: #FFF;
  position: relative;
  z-index: 2;
  transition: all .5s;
  font-size: 1.1rem !important;
}

.tab-titles>a.active,
.tab-titles>a:hover {
  background-color: #FFF !important;
  color: #000;
  margin: 1rem 0;
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
  font-weight: bold;
  box-shadow: 0 0 15px #ccc;
}

.tab-titles>a.active::after,
.tab-titles>a:hover::after {
  background-color: #FFF !important;
  content: "";
  width: 15px;
  height: 100%;
  position: absolute;
  left: 200px;
  top: 0;
}
</style>